<template>
  <div class="select-none">
    <img :src="bgImg" class="wave" />
    <!-- <div class="flex-c absolute right-5 top-3">
      <el-switch
        v-model="dataTheme"
        inline-prompt
        :active-icon="dayIcon"
        :inactive-icon="darkIcon"
        @change="dataThemeChange"
      />
    </div> -->
    <div class="login-container">
      <div class="img">
        <!-- <component :is="toRaw(illustration)" /> -->
      </div>
      <div class="login-box">
        <div class="login-form">
          <avatar class="avatar" />
          <h2 class="outline-none">{{ title }}</h2>

          <el-form ref="formRef" :model="formData" :rules="rules" size="large">
            <el-form-item prop="account">
              <el-input
                clearable
                v-model.trim="formData.account"
                placeholder="账号"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                clearable
                show-password
                v-model="formData.password"
                placeholder="密码"
              />
            </el-form-item>
            <el-form-item prop="code">
              <div class="flex items-center">
                <el-input
                  v-model="formData.code"
                  placeholder="请输入验证码"
                  @keyup.enter="handleLogin"
                >
                  <template #prepend>
                    <icon name="local-icon-anquan" />
                  </template>
                </el-input>
                <div
                  class="ml-4 w-[100px] flex-none cursor-pointer"
                  @click="getLoginCaptcha"
                >
                  <img
                    class="w-full"
                    :src="'data:image/png;base64,' + codeImg"
                    alt=""
                  />
                </div>
              </div>
            </el-form-item>
            <el-button
              class="w-full mt-4"
              size="default"
              type="primary"
              :loading="isLock"
              @click="lockLogin"
            >
              登录
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, shallowRef, toRaw } from "vue";
import type { InputInstance, FormInstance } from "element-plus";
import LayoutFooter from "@/layout/components/footer.vue";
import useAppStore from "@/stores/modules/app";
import useUserStore from "@/stores/modules/user";
import cache from "@/utils/cache";
import { ACCOUNT_KEY } from "@/enums/cacheEnums";
import { PageEnum } from "@/enums/pageEnum";
import { useLockFn } from "@/hooks/useLockFn";
import { loginCaptcha } from "@/api/user";
import bgImg from "@/assets/images/bg.png";
// import avatar from "@/assets/images/avatar.svg?component";
import illustration from "@/assets/images/illustration.svg?component";
const passwordRef = shallowRef<InputInstance>();
const formRef = shallowRef<FormInstance>();
const appStore = useAppStore();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const remAccount = ref(false);
const config = computed(() => appStore.config);
const codeImg = ref();
const title = ref("Lonni-cloud-admin");
const formData = reactive({
  account: "",
  password: "",
  code: "",
  uuid: "",
  deviceType: "PC",
  userType: "PLAT_FORM_ADMIN",
});
const rules = {
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: ["blur"],
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["blur"],
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: ["blur"],
    },
  ],
};

const getLoginCaptcha = async () => {
  const data = await loginCaptcha();
  console.log("datadatadata", data);
  formData.uuid = data.uuid;
  codeImg.value = data.img;
};
// 回车按键监听
const handleEnter = () => {
  if (!formData.password) {
    return passwordRef.value?.focus();
  }
  handleLogin();
};
// 登录处理
const handleLogin = async () => {
  await formRef.value?.validate();
  // 记住账号，缓存
  cache.set(ACCOUNT_KEY, {
    remember: remAccount.value,
    account: remAccount.value ? formData.account : "",
  });
  try {
    const data = { ...formData };
    data.username = formData.account;

    await userStore.login(data);
  } catch (error) {
    getLoginCaptcha();
  }
  const {
    query: { redirect },
  } = route;
  const path = typeof redirect === "string" ? redirect : PageEnum.INDEX;
  router.push(path);
};
const { isLock, lockFn: lockLogin } = useLockFn(handleLogin);

onMounted(() => {
  const value = cache.get(ACCOUNT_KEY);
  getLoginCaptcha();
  if (value?.remember) {
    remAccount.value = value.remember;
    formData.account = value.account;
  }
});
</script>

<style lang="scss" scoped>
.wave {
  position: fixed;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.login-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18rem;
  padding: 0 2rem;
}

.img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.img img {
  width: 500px;
}

.login-box {
  display: flex;
  align-items: center;
  text-align: center;
}

.login-form {
  width: 360px;
}

.avatar {
  width: 350px;
  height: 80px;
}

.login-form h2 {
  text-transform: uppercase;
  margin: 15px 0;
  color: #999;
  font: bold 200% Consolas, Monaco, monospace;
}

@media screen and (max-width: 1180px) {
  .login-container {
    grid-gap: 9rem;
  }

  .login-form {
    width: 290px;
  }

  .login-form h2 {
    font-size: 2.4rem;
    margin: 8px 0;
  }

  .img img {
    width: 360px;
  }

  .avatar {
    width: 280px;
    height: 80px;
  }
}

@media screen and (max-width: 968px) {
  .wave {
    display: none;
  }

  .img {
    display: none;
  }

  .login-container {
    grid-template-columns: 1fr;
  }

  .login-box {
    justify-content: center;
  }
}

:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}

// .login {
//   background-image: url("@/assets/images/bg2.png");
//   @apply min-h-screen bg-no-repeat bg-center bg-cover;
//   .login-card {
//     height: 400px;
//     :deep(.el-input-group__prepend) {
//       padding: 0 15px;
//     }
//   }
// }
</style>
